<template>
  <div class="w_h_100">
    <div class="box">
      <div class="inlet">系统管理 > 流程管理 > <span class="size">小表单管理</span></div>
      <myform :fields="fields" :model="values" class="m_t_10">
        <template v-slot:button>
          <el-button @click="resetting">重置</el-button>
          <el-button type="primary" :icon="Search" @click="searchFor">搜索</el-button>
        </template>
      </myform>
    </div>
    <div class="mytable m_t_10 ">
      <div class="d_f j_c_s_b a_i_c">
        <h4>表单列表</h4>
        <el-button type="primary" :icon="Plus" @click="addForm(1,'')" v-hasPerm="'addChildForm'">新增表单</el-button>
      </div>
      <mytable :fields="tableFields" width="120" ref="tableRef" :values="values" api="formFind" class="m_t_10"
        :isSelection="false">
        <template v-slot:status="{row}">
        <span v-if="row.status==1" class="sus">开启</span>
        <span v-else class="eor">禁用</span>
        </template>
        <template v-slot:category="{row}">
        <span>{{ row.category==0?'否':'是' }}</span>
        </template>
        <template v-slot:isReset="{row}">
          <el-switch v-model="row.isReset" inline-prompt active-text="开" inactive-text="关" :active-value="1"
          :inactive-value="2" @click="changeSwitch(row.id, row.isReset)"  style="--el-switch-on-color:#13ce66; " />
        </template>
        <template v-slot:operation="{ row }">
          <div class="d_f j_c_s_b">
            <span class="edit" @click="edit(row)" v-hasPerm="'editChildForm'">编辑</span>
            <span class="edit" @click="detail(row)" v-if="row.isBuiltin==1">查看表单</span>
            <span class="error" @click="deleteOut(row.id)" v-if="row.isBuiltin==0" v-hasPerm="'deleteChildForm'">删除</span>
          </div>
        </template>
      </mytable>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, onBeforeMount, ref } from 'vue'
import { copy } from '../../../../utils/date'
import { Search, Plus } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import {formDel,formSetReset} from '../../../../api/system/flowPath'
import {ElMessageBox} from 'element-plus'
import { Message } from '../../../../utils/resetMessage'
import {flowPathChildFormType} from '../../../../type/system'
const values = {
  name:'',
}
export default defineComponent({
  name: '',
  setup() {
    const data:flowPathChildFormType = reactive({
      fields: [
        {
          label: "表单名称",
          prop: 'name',
          placeholder: '请输入',
          type: 'input',
          labelWidth: '70px'
        },
        {
          prop: 'button'
        }
      ],
      values: copy(values),
      tableFields:[
        {
          label:'表单名称',
          prop:'name',
        },
        {
          label:'状态',
          prop:'status',
        },
        {
          label:'是否是自定义',
          prop:'category',
        },
        {
          label:'是否显示清除按钮',
          prop:'isReset',
        },
        {
          label:'表单描述',
          prop:'tagName',
        }
      ],
    
    })
    onBeforeMount(() => {
    })
    const tableRef = ref()
    const router=useRouter()
    const methods = {
      //表格数据重置
      resetting() {
        data.values = copy(values)
        tableRef.value.resettingTable(data.values)
      },
      //列表根据筛选条件搜索
      searchFor() {
        tableRef.value.handleCurrentChange(1)
      },
      addForm(category:number,id?:string|number){
        if(id){
          router.push({path:'/system/flowPath/childForm/add',query:{id:id,category:category}})
        }else{
          router.push({path:'/system/flowPath/childForm/add',query:{category:category}})
        }
      },
      edit(row:any){
        router.push({path:'/system/flowPath/childForm/edit',query:{id:row.id,category:row.category}})
      },
      deleteOut(id:number){
          ElMessageBox.confirm(
            '是否删除当前表单?',
            '提示',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'error',
            }
          )
            .then(() => {
              formDel({id:id}).then(()=>{
                Message({type:'success',message:'删除成功'})
                tableRef.value.handleCurrentChange(1)//添加表格之后重新获取表格
              })
            })
        },
        detail(row:any){
      router.push({path:'/system/flowPath/childForm/detail',query:{code:row.tag,type:'smallForm'}})
        },
         //是否禁用当前部门
      changeSwitch(id: number, status: number) {
        if (!id) return
        formSetReset({ id: id, reset: status }).then(() => {
          Message({ type: 'success', message: '操作成功' })
        })
      },
    }
    return {
      ...toRefs(data),
      ...methods, tableRef, Search, Plus,
    }
  }
})
</script>
<style scoped lang='scss'>
.box {
  width: calc(100% - 64px);
  background: #fff;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  height: 70px;
  padding: 10px 32px;
  margin-top: 10px;
}

.mytable {
  overflow-y: auto;
  width: calc(100% - 64px);
  background: #fff;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  padding: 10px 32px;
  height: calc(100% - 125px);
}
.sus{
  color: #00B42A;
}
.eor{
  color: #F53F3F;
}
</style>